<template>
    <div class="tags">
        <!-- :effect="item.title是不是当前路由的对象的title相等?'dark':'plain'" -->
        <!-- native 原生 
        .native 用法： 在一个自定义组件想要给根标签添加事件，但不生效，就给它添加原生的修饰符
        .prevent 阻止浏览器的默认行为
        -->
        <el-tag class="tag" size="medium" :closable="index>0"
            v-for="item,index in tags"
            :key="item.path"
            :effect="item.title==$route.meta.titles[$route.meta.titles.length-1]?'dark':'plain'"
            @click="goTo(item.path)"
            @close="close(index)"
            :disable-transitions="true"
            @contextmenu.native.prevent="rightClick($event,index)"
        >
        <i class="cir" v-show="item.title==$route.meta.titles[$route.meta.titles.length-1]"></i>
        {{item.title}}</el-tag>
        

        <TagsMenu 
            v-show="isShowTagsMenu"
            :clientX="clientX"
            :clientY="clientY"
            :clickIndex="clickIndex"
            :tagsLength="tags.length"
            @fn="clickMenu"
        />
    </div>
</template>

<script>
import TagsMenu from "./TagsMenu.vue"
export default {
    components:{
        TagsMenu
    },
    data () {
        return {
            tags:[{
                title:"首页",
                path:"/home"
            }],
            isShowTagsMenu:false,
            clientX:0,
            clientY:0,
            clickIndex:0
        }
    },
    mounted(){
        // 给文档添加点击事件
        document.addEventListener("click",this.closeMenu);
    },
    beforeDestroy(){
        document.removeEventListener("click",this.closeMenu);
    },
    methods:{
        clickMenu(i){
            if(i==5){
                // 全部关闭
                // 1 处理数组
                this.tags=[{
                    title:"首页",
                    path:"/home"
                }]
                // 跳转到首页
                this.goTo("/home")
            }
        },
        rightClick(e,i){
            console.log("右键点击了",e.clientX,e.clientY);
            this.isShowTagsMenu = true;
            this.clientX = e.clientX;
            this.clientY = e.clientY;
            this.clickIndex = i;
            // 关闭浏览器默认的菜单
            // window.event.returnValue=false;
            // return false
        },
        closeMenu(){
            this.isShowTagsMenu = false;
        },
        goTo(path){
            this.$router.push(path);
            this.closeMenu();
        },
        close(i){
            // 先跳转，再删除， 是index的问题(如果先删除，会影响index就会影响我们的逻辑的分析)
            // this.tags[i].title 点击的那一项
            // this.$route.meta.titles[this.$route.meta.titles.length-1] 路由的这一项
            // if(this.tags[i].title===this.$route.meta.titles[this.$route.meta.titles.length-1]){
            // && i!==this.tags.length-1   且不是最后一项
            if(this.tags[i].path===this.$route.path && i!==this.tags.length-1){
                this.$router.push(this.tags[this.tags.length-1].path);
            }
            // else if(是不是最后一项){
            else if(i===this.tags.length-1){
                this.$router.push(this.tags[this.tags.length-2].path);
            }
            // 关闭当前项，本质上就是删除tags的对应项
            this.tags.splice(i,1);
            this.closeMenu();
        }
    },
    watch:{
        $route:{
            immediate:true, // 立即监听
            handler(val,oldval){
                // console.log(val.meta.titles[val.meta.titles.length-1]);
                
                // 数组名.find() 查找, 调用结果是一个布尔值，找到就true，否则就false
                const bool = this.tags.find(item=>{
                    // return 当前路径跟不跟 item.path 相等
                    return val.path == item.path 
                })
                if(!bool){
                    this.tags.push({
                        title:val.meta.titles[val.meta.titles.length-1],
                        path:val.path
                    })
                }
                
            }
        }
    }
}
</script>
 
<style lang = "less" scoped>
    .tags{
        padding-left: 20px;
        padding-top: 5px;
        .tag{
            cursor: pointer;
            margin-right: 5px;

            .cir{
                width: 8px;
                height: 8px;
                margin-right: 4px;
                background-color: #fff;
                border-radius: 50%;
                display: inline-block;
            }
        }
    }
</style>